import React  from 'react';
import { 
  Modal ,
  Form,
  Input, 
  Select, 
  Typography,
  Divider 
} from 'antd'; 
import ImageUpload from '@/pages/UpLoad/single_file_upload/index'
import{CreateFormProps} from'@/interface/index'
 
const { Title } = Typography;
const handleChange=(value)=> {
  console.log(`selected ${value}`);
}



const options = [];
for (let i = 0; i < 100; i++) {
  const value = `${i.toString(36)}${i}`;
  options.push({
    value,
    disabled: i === 10,
  });
}


const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { modalVisible, onCancel } = props; 
  return (
    <Modal
      destroyOnClose
      title="发布公告"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
         <Form.Item
          name={['user', 'name']}
          label="标题"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item 
        name={['user', 'Signature']} 
        label="内容" 
        rules={[
            {
              required: true,
            },
          ]}>
          <Input.TextArea />
        </Form.Item>
        <Form.Item
        label="图片上传 "
        rules={[
          {
            required: true,
          },
        ]}
        >
          <ImageUpload/>
        </Form.Item> 
        <Form.Item
          label="管理员"
          > 
          <Select
            mode="multiple"
            style={{ width: '100%' }}
            placeholder="Please select" 
            onChange={handleChange}
            options={options}
          /> 
          <Divider /> 
          </Form.Item>
        <Form.Item
          label="学生"
          > 
          <Select
            mode="multiple"
            style={{ width: '100%' }}
            placeholder="Please select" 
            onChange={handleChange}
            options={options}
          /> 
          <Divider /> 
          </Form.Item>
        <Form.Item
          label="指导员"
          > 
          <Select
            mode="multiple"
            style={{ width: '100%' }}
            placeholder="Please select" 
            onChange={handleChange}
            options={options}
          /> 
          <Divider /> 
          </Form.Item>  
      {props.children}
    </Modal> 
  );
};

export default CreateForm;
